<template>
    <div class="content">
        <div id="container"></div>
        <div class="title-item">
            <span>卡口列表</span>
        </div>
        <div class="table-div">
            <van-row class="table-item">
                <van-col span="2">
                    序号
                </van-col>
                <van-col span="4">
                    地点
                </van-col>
                <van-col span="4">
                    类型
                </van-col>
                <van-col span="4">
                    名称
                </van-col>
                <van-col span="4">
                    编号
                </van-col>
                <!--<van-col span="4" class="hd-ellipsis-2">-->
                <!--位置-->
                <!--</van-col>-->
                <van-col span="4">
                    分局
                </van-col>
                <van-col span="2">
                    查看
                </van-col>
            </van-row>
            <van-row class="table-item" v-for="item in kkxxList" :key="item.id">
                <van-col span="2">
                    {{item.row_num}}
                </van-col>
                <van-col span="4">
                    {{item.loc_name}}
                </van-col>
                <van-col span="4">
                    {{item.type}}
                </van-col>
                <van-col span="4">
                    {{item.name}}
                </van-col>
                <van-col span="4">
                    {{item.road_num}}
                </van-col>
                <!--<van-col span="4">-->
                <!--绕城高速东陵收费站-->
                <!--</van-col>-->
                <van-col span="4">
                    {{item.unit}}
                </van-col>
                <van-col span="2">
                    查看
                </van-col>
            </van-row>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import { kkxxList } from '@/api/traffic-jam'
export default {
  name: 'index',
  data () {
    return {
      marker1: '',
      marker2: '',
      map_pointList: [],
      kkxxList: []
    }
  },
  methods: {
    init () {
      /**
       * kkxxList卡口
       */
      kkxxList().then(ret => {
        if (ret.data.errcode === 0) {
          this.kkxxList = ret.data.data
          this.mapData()
        } else {
          Dialog.alert({
            message: ret.data.errmsg
          }).then(() => {
            // on close
          })
        }
      })
    },
    mapData () {
      var map = new AMap.Map('container', {
        zoom: 11, // 级别
        center: [123.432790922, 41.8086447835], // 中心点坐标
        viewMode: '3D'// 使用3D视图
      })
      let markerList = []
      for (let i = 0; i < this.kkxxList.length; i++) {
        let marker = i
        marker = new AMap.Marker({
          position: new AMap.LngLat(Number(this.kkxxList[i].longitude), Number(this.kkxxList[i].latitude)), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: this.kkxxList[i].loc_name
        })
        markerList = markerList.concat(marker)
      }
      map.add(markerList)
    }
  },
  mounted () {
    this.init()
    // var map = new AMap.Map('container', {
    //   zoom: 11, // 级别
    //   center: [123.432790922, 41.8086447835], // 中心点坐标
    //   viewMode: '3D'// 使用3D视图
    // })
    // console.log(this.kkxxList.length)
    // let markerList = []
    // for (let i = 0; i < this.kkxxList.size; i++) {
    //   let marker = i
    //   marker = new AMap.Marker({
    //     position: new AMap.LngLat(this.kkxxList[i].longitude, this.kkxxList[i].latitude), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //     title: 'shijidasha'
    //   })
    //   markerList = markerList.push(marker)
    // }
    // // 创建一个 Marker 实例：
    // var marker = new AMap.Marker({
    //   position: new AMap.LngLat(123.460513, 41.71851), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var marker1 = new AMap.Marker({
    //   position: new AMap.LngLat(123.416396, 41.784567), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var marker2 = new AMap.Marker({
    //   position: new AMap.LngLat(123.404036, 41.80965), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var marker3 = new AMap.Marker({
    //   position: new AMap.LngLat(123.447982, 41.869502), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var marker4 = new AMap.Marker({
    //   position: new AMap.LngLat(123.335372, 41.817326), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var marker5 = new AMap.Marker({
    //   position: new AMap.LngLat(123.442489, 41.832677), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
    //   title: 'shijidasha'
    // })
    // var markerList = [marker, marker1, marker2, marker3, marker4, marker5]

    // map.add(markerList)
    // 将创建的点标记添加到已有的地图实例：
    // map.add(marker)
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    #container {
        width:300px;
        height: 180px;
        margin: 0 auto;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px 10px 0 10px;
        font-size: 14px;
        color: #333333;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 10px;
    }

    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
        display: flex;
        justify-content: flex-start;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
</style>
